﻿<template>
  <div>
    <el-dialog v-drag title = '附件列表' :visible.sync='dialogSelectVisible' width = '50%'
    @close = "closeDialog" append-to-body :close-on-click-modal = 'false' :close-on-press-escape = 'false'>
      <div v-loading = 'loading' :element-loading-text = 'loadingText'>
        <div v-if = '!fileList.length' class = 'showFile_fileList_noFile'>暂无附件</div>
        <ul v-else class = 'showFile_fileList'>
          <li v-for = '(item, index) in fileList' :key = 'index'>
            <span title = '点击下载附件' @click = 'downFile(item.url)'>{{item.name}}</span>
          </li>
        </ul>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props: ['showUploadFileDialog_visible', 'currentRowFileList'],
  data () {
    return {
      loading: false,
      loadingText: '文件下载中...',
      dialogSelectVisible: false,
      fileList: []
    }
  },
  created () {
    this.initPage()
  },
  methods: {
    // 初始化页面信息
    initPage () {
      this.fileList = []
      if (this.currentRowFileList) {
        // 判断是不是数组结构
        if (this.$isArray(this.currentRowFileList)) {
          if (this.currentRowFileList.length) {
            this.currentRowFileList.forEach(item => {
              if (item) {
                let obj = {
                  name: item,
                  url: item
                }
                if (item.indexOf('/name/') !== -1) {
                  obj.name = item.slice(item.indexOf('/name/') + 6)
                }
                this.fileList.push(obj)
              }
            })
          }
        } else {
          let obj = {
            name: this.currentRowFileList,
            url: this.currentRowFileList
          }
          if (this.currentRowFileList.indexOf('/name/') !== -1) {
            obj.name = this.currentRowFileList.slice(this.currentRowFileList.indexOf('/name/') + 6)
          }
          this.fileList.push(obj)
        }
      }
    },
    // 关闭弹窗
    closeDialog () {
      this.$emit('closeShowUploadFileDialog')
    },
    downFile (fileUrl) {
      this.$confirm('确定要下载该附件么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonClass: 'el-button--info',
        cancelButtonText: '取消'
      }).then(() => {
        this.loading = true
        this.getFileBasicInfo(fileUrl)
      }).catch(() => {})
    },
    // 根据url获取到文件的基本信息
    getFileBasicInfo (fileUrl) {
      let downUrl = ''
      if (fileUrl) {
        let fileName = '文件'
        if (fileUrl.indexOf('/name/') !== -1) {
          downUrl = fileUrl.slice(0, fileUrl.indexOf('/name/'))
          fileName = fileUrl.slice(fileUrl.indexOf('/name/') + 6)
        } else {
          downUrl = fileUrl
        }
        if (downUrl.indexOf('/fileset/dl/') !== -1) {
          downUrl = downUrl.replace('/fileset/dl/', '/fileset/')
        }
        axios({
          url: downUrl,
          method: 'get',
          responseType: 'arraybuffer' // 文件是二进制时
        }).then(data => {
          if (data && data.status === 200 && data.data) {
            let fileType = data.headers['content-type']
            let blobContent = new Blob([data.data], {type: fileType})
            this.downloadblob(blobContent, fileName)
            this.$message({
              message: '下载成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: '下载出错',
              type: 'error'
            })
          }
          this.loading = false
        }).catch(error => {
          console.log(error)
          this.loading = false
        })
      } else {
        this.$message({
          message: '没有获取到本文件的下载地址',
          type: 'warning'
        })
        this.loading = false
      }
    },
    // 下载文件到本地
    downloadblob (blobcontent, filename) {
      if ('msSaveOrOpenBlob' in navigator) {
        // Microsoft Edge and Microsoft Internet Explorer 10-11
        window.navigator.msSaveOrOpenBlob(blobcontent, filename)
      } else {
        // 创建隐藏的可下载链接
        var eleLink = document.createElement('a')
        eleLink.download = filename
        eleLink.style.display = 'none'
        // 字符内容转变成blob地址
        eleLink.href = URL.createObjectURL(blobcontent)
        // 触发点击
        document.body.appendChild(eleLink)
        eleLink.click()
        // 然后移除
        document.body.removeChild(eleLink)
      }
    }
  },
  watch: {
    showUploadFileDialog_visible: {
      handler: function (val, oldVal) {
        this.dialogSelectVisible = val
        if (val) {
          this.initPage()
        }
      },
      deep: true
    }
  }
}
</script>
